import React from "react"
import {BrowserRouter as Router, Route, Link, Switch} from "react-router-dom";
// class Topics extends React.Component{
//     render(){
//         return(
//             <div>This is Topics</div>
//         )
//     }
// }{/*todo 这是注释*/}
// {
//     // todo 这是注释
// }

export default Topics

function Topics({match}) { // todo 二级匹配
    console.log(match) // {path: "/topics", url: "/topics", isExact: false, params: {…}}
    // console.log(match.path);
    // console.log(match.url);
    return (
        <div>
            <h2>Topics</h2>
            <ul>
                <li>
                    <Link to={`${match.url}/rendering`}>Rendering with React</Link>
                </li>
                <li>
                    <Link to={`${match.url}/components`}>Components</Link>
                </li>
                <li>
                    {/*<Link to={`${match.url}/props-v-state`}>Props v. State </Link>*/}

                    <Link to={{pathname: `${match.url}/props-v-state`, search: "?name=modus-create"}}>
                        Props v. State
                    </Link>
                </li>
            </ul>

            <Switch>
                <Route path={`${match.path}/:topicName(rendering|components)`} component={Topic}/>
                <Route path={`${match.path}/:topicName`} component={TopicNoMatch}/>
                <Route exact path={match.path}
                       render={() => <h3>Please select a topic.</h3>}
                />
            </Switch>


        </div>
    );
    {/* todo :topicName 将以params 参数 传递   其它方式 https://reacttraining.com/react-router/web/example/query-parameters/
    }
    {/* 优先匹配第1，2个路由， 没有选择时默认才会匹配第3个路由 */
    }
    {/* 正则匹配路由第一个路由， 没有则第2个 */
    }
}


// 1. 函数方式
function Topic({match}) {
    console.log(match) // {path: "/topics/:topicName", url: "/topics/props-v-state", isExact: true, params: {…}}
    // params: {topicName: "props-v-state"}
    return (
        <div>
            <h3>{match.params.topicName}</h3>

        </div>
    );
}

function TopicNoMatch({match}) {
    console.log(match)
    // console.log(match) // {path: "/topics/:topicName", url: "/topics/props-v-state", isExact: true, params: {…}}
    // params: {topicName: "props-v-state"}
    return (
        <div>
            <h3 style={{color: "red"}}>{match.params.topicName} not Match,</h3>

        </div>
    );
}

// 2.  组件方式
// class Topic extends React.Component{
//     constructor(props){
//         super(props)
//     }
//
//     render() {
//         // console.log(this.props)
//         return(
//             <div>
//                 <h3>{this.props.match.params.topicName}</h3>
//             </div>
//         )
//     }
//
// }